<template>
	<view class="add-u">
		<view class="content">
			
			<view class="hed">
				<view class="header-c" @click="findPic">
					<view class="herder-hoder" v-if="header == null">
						<uni-icons type="plusempty" color="#73738f" size="20"></uni-icons>
					</view>
					<image v-else :src="header" mode="aspectFill" class="header"></image>
				</view>
			</view>
			<uni-forms-item label="主播名" style="color: #73738f;" class="uni-f-item-row">
				<uni-easyinput v-model="name" :styles="inputStyle" placeholder="请输入主播名" :maxlength="8" primaryColor="#9393b8"/>
			</uni-forms-item>
			<uni-forms-item label="艺名" style="color: #73738f;" class="uni-f-item-row">
				<uni-easyinput v-model="nick_name" :styles="inputStyle" placeholder="请输入主播艺名" :maxlength="15" primaryColor="#9393b8"/>
			</uni-forms-item>
			<uni-forms-item label="专属礼物" style="color: #73738f; margin-bottom: 50px;" class="uni-f-item-row">
				<view class="gif" @click="addGift" v-if="gift == null">
					<view class="herder-hoder">
						<uni-icons type="plusempty" color="#73738f" size="15"></uni-icons>
					</view>
				</view>
				<view class="gift-info" @click="addGift" v-else>
					<image class="gift-icon" :src="gift.icon" mode=""></image>
					<view class="gift-title">
						{{gift.name}}
					</view>
					<uni-icons style="margin-left: 5px;" type="refresh-filled" color="#73738f" size="18"></uni-icons>
				</view>
			</uni-forms-item>
			<button type="warn" @click="addUser">确定</button>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				nick_name: '',
				header: null,
				gift: null,
				inputStyle: {
					color: '#b3b3de',
					backgroundColor: '#4b4b5d',
					disableColor: '#383846',
					borderColor: '#73738f'
				},
				userInfo: null
			}
		},
		
		onLoad() {
			
			window.electronAPI.onSelectGiftToHtml((gift) => {
				this.gift = gift
			})
			
			window.electronAPI.getEditUserInfo().then((userInfo) => {
				if (userInfo) {
					this.name = userInfo.name
					this.nick_name = userInfo.nick_name,
					this.header = userInfo.header,
					this.gift = {
						source_id: userInfo.gift_source_id,
						name: userInfo.gift_name,
						icon: userInfo.gift_icon
					}
					this.userInfo = userInfo
				}
			})
		},
		
		beforeDestroy() {
			window.electronAPI.removeOnSelectGiftToHtml()
		},
		
		
		methods: {
			
			findPic() {
				window.electronAPI.selectImage().then((res) => {
					this.header = res.base_64
				})
			},
			
			addGift() {
				window.electronAPI.selectGifAlert(null, 'add-user-alert')
			},
			
			addUser() {
				
				if (this.userInfo == null) {
					window.electronAPI.finishUser({
						name: this.name,
						header: this.header,
						nick_name: this.nick_name,
						gift_icon: this.gift.icon,
						gift_source_id: this.gift.source_id,
						gift_name: this.gift.name
					}, 'add-user', 'add-user-alert')
				} else {
					window.electronAPI.finishUser({
						id: this.userInfo.id,
						user_code: this.userInfo.user_code,
						show: this.userInfo.show,
						name: this.name,
						header: this.header,
						nick_name: this.nick_name,
						gift_icon: this.gift.icon,
						gift_source_id: this.gift.source_id,
						gift_name: this.gift.name,
						total_gift_coins: this.userInfo.total_gift_coins,
						now_gift_coins: this.userInfo.now_gift_coins
					}, 'edit-user', 'add-user-alert')
				}
			}
		}
	}
</script>

<style>

	.add-u {
		width: 100%;
		height: 100vh;
		background-color: #272730;
		display: flex;
	}
	
	.content {
		margin: 30px;
	}
	
	.uni-f-item-row {
		margin-bottom: 30px;
	}
	
	.hed {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-bottom: 30px;
	}
	
	.header-c {
		background-color: #4b4b5d;
		width: 70px;
		height: 70px;
		border-radius: 100%;
		border: 1px #73738f solid;
		overflow: hidden;
	}
	
	.header-c:hover {
		cursor: pointer;
	}
	
	.header-c:active {
		opacity: 0.9;
	}
	
	.herder-hoder {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.header {
		width: 100%;
		height: 100%;
	}
	
	.gif {
		background-color: #4b4b5d;
		height: 35px;
		border: #73738f 1px solid;
		border-radius: 5px;
	}
	
	.gif:hover {
		cursor: pointer;
		background-color: #454556;
	}
	
	.gif:active {
		opacity: 0.9;
	}
	
	.gift-info {
		height: 37px;
		display: flex;
		align-items: center;
	}
	
	.gift-info:hover {
		cursor: pointer;
		opacity: 0.9;
	}
	
	.gift-info:active {
		opacity: 0.8;
	}
	
	.gift-icon {
		width: 35px;
		height: 35px;
	}
	
</style>
